import { useContext } from "react";
import { getAnchorPosition } from "./Anchors";
import { BaseContext, JoinLineType } from "./ContainerProvider";

export default function JoinLine(props: JoinLineType) {
  const { start, end } = props;
  const { state } = useContext(BaseContext);
  const startPos = getAnchorPosition(state.nodes[start.nodeIndex])[
    start.anchorPos
  ];
  const endPos = getAnchorPosition(state.nodes[end.nodeIndex])[end.anchorPos];
  return (
    <line
      stroke="#ccc"
      x1={startPos.cx}
      y1={startPos.cy}
      x2={endPos.cx}
      y2={endPos.cy}
    ></line>
  );
}
